<template>
    <div class="min-h-screen bg-white">
        <!-- 顶部横幅 -->
        <a-layout-header class="relative h-[600px] p-0 bg-[#1890ff] bg-[url('https://picsum.photos/1920/600')] bg-cover bg-center">
            <a-row class="container mx-auto px-[5%] h-full flex items-center">
                <a-col class="max-w-2xl text-white">
                    <a-space direction="vertical" class="flex flex-col !mb-4">
                        <a-space class="!text-white text-4xl font-bold">彼亿营销</a-space>
                        <a-space class="!text-white text-4xl font-bold">让传播更高效</a-space>
                    </a-space>
                    <a-space class="!text-white !mb-8 font-bold">以客户需求为导向，以客户的KPI考核为目标，以专业的服务赢得客户</a-space>
                    <a-space>
                        <a-button type="primary" size="large" class="!rounded-full !bg-white !text-blue-500">了解更多 ></a-button>
                        <a-button ghost size="large" class="!rounded-full">
                            <template #icon>
                                <PhoneOutlined class="mr-1 transform -scale-x-100" />
                            </template>
                            联系我们：400-1161-225
                        </a-button>
                    </a-space>
                </a-col>
            </a-row>
            <a-layout-content>
            </a-layout-content>
        </a-layout-header>

        <!-- 数据展示 -->
        <div class="bg-white">
            <div class="container mx-auto py-16 px-[5%]">
                <a-row :gutter="[24, 24]" class="text-center">
                    <a-col :span="8">
                        <div class="text-3xl font-bold mb-2 text-[#333333]">15年+</div>
                        <div class="text-[#999999]">专业服务经验</div>
                    </a-col>
                    <a-col :span="8">
                        <div class="text-3xl font-bold mb-2 text-[#333333]">1000+</div>
                        <div class="text-[#999999]">成功服务客户</div>
                    </a-col>
                    <a-col :span="8">
                        <div class="text-3xl font-bold mb-2 text-[#333333]">20+</div>
                        <div class="text-[#999999]">战略合作伙伴</div>
                    </a-col>
                </a-row>
            </div>
        </div>
        <!-- 关于我们 -->
        <a-layout-content class="bg-[#CCEEFF] pl-[10%]">
            <a-row class="container mx-auto py-16">
                <a-col :span="24">
                    <a-typography-title class="text-center !mb-12" :bold="false">全面、专业的互联网营销服务商</a-typography-title>
                    <a-row :gutter="24" class="backdrop-blur-md bg-white/70 rounded-lg shadow-lg">
                        <a-col :span="3" class="!px-0">
                            <a-space direction="vertical" class="flex flex-col space-y-2">
                                <a-card class="!h-auto cursor-pointer !border-0 py-8 px-4 !bg-gradient-to-r !from-[#4a90e2] !to-[#67b8ff]">
                                    <a-space class="flex items-center gap-4">
                                        <a-avatar size="large" class="!bg-white !text-blue-500">关</a-avatar>
                                        <a-typography-text class="font-bold text-white">关于我们</a-typography-text>
                                    </a-space>
                                </a-card>
                                <a-card class="!h-auto py-8 px-4 !bg-transparent cursor-pointer !border-0">
                                    <a-space class="flex items-center gap-4">
                                        <a-avatar size="large" class="!bg-gray-200">品</a-avatar>
                                        <a-typography-text>品牌整合营销代表品牌</a-typography-text>
                                    </a-space>
                                </a-card>
                                <a-card class="!h-auto py-8 px-4 !bg-transparent cursor-pointer !border-0">
                                    <a-space class="flex items-center gap-4">
                                        <a-avatar size="large" class="!bg-gray-200">企</a-avatar>
                                        <a-typography-text>企业策略</a-typography-text>
                                    </a-space>
                                </a-card>
                                <a-card class="!h-auto py-8 px-4 !bg-transparent cursor-pointer !border-0">
                                    <a-space class="flex items-center gap-4">
                                        <a-avatar size="large" class="!bg-gray-200">行</a-avatar>
                                        <a-typography-text>行业资讯</a-typography-text>
                                    </a-space>
                                </a-card>
                            </a-space>
                        </a-col>
                        <a-col :span="12" class="flex flex-col items-start justify-center px-10">
                            <a-space direction="vertical" class="mb-6">
                                <a-list :split="false" class="space-y-2 text-[#666666]">
                                    <a-list-item>
                                        <a-space>
                                            <a-typography-text class="text-xl font-medium">关于我们</a-typography-text>
                                        </a-space>
                                    </a-list-item>
                                    <a-list-item>
                                        <a-space>
                                            <a-badge color="blue" />
                                            <a-typography-text>专注互联网营销十余年</a-typography-text>
                                        </a-space>
                                    </a-list-item>
                                    <a-list-item>
                                        <a-space>
                                            <a-badge color="blue" />
                                            <a-typography-text>以"专业、快捷、共赢"为服务理念</a-typography-text>
                                        </a-space>
                                    </a-list-item>
                                    <a-list-item>
                                        <a-space>
                                            <a-badge color="blue" />
                                            <a-typography-text>为超过1000+企业提供高效的网络推广服务</a-typography-text>
                                        </a-space>
                                    </a-list-item>
                                    <a-list-item>
                                        <a-button type="primary" class="!bg-blue-500 !rounded-full mt-10" size="large">了解更多 ></a-button>
                                    </a-list-item>
                                </a-list>
                            </a-space>
                        </a-col>
                        <a-col :span="8" class="flex items-center justify-center">
                            <a-image src="https://picsum.photos/400/300" :width="400" class="rounded-md shadow-lg" />
                        </a-col>
                    </a-row>
                </a-col>
            </a-row>
        </a-layout-content>

        <!-- 我们的服务 -->
        <a-layout-content class="bg-[#001529]">
            <a-row class="container mx-auto py-16 pl-[10%]">
                <a-col :span="24">
                    <a-typography-title class="text-center !text-white !mb-12">我们的服务</a-typography-title>
                    <a-row :gutter="24" class="relative">
                        <a-col :span="6" class="text-white">
                            <a-space direction="vertical" class="pl-4">
                                <div class="flex items-center mb-4">
                                    <a-badge color="white" />
                                    <a-typography-text class="text-base font-medium text-white">品牌整合营销</a-typography-text>
                                </div>
                                <div class="flex items-center mb-4">
                                    <a-badge color="white" />
                                    <a-typography-text class="text-base font-medium text-white">品牌声誉管理</a-typography-text>
                                </div>
                                <div class="flex items-center mb-4">
                                    <a-badge color="white" />
                                    <a-typography-text class="text-base font-medium text-white">网站seo优化</a-typography-text>
                                </div>
                                <div class="flex items-center mb-4">
                                    <a-badge color="white" />
                                    <a-typography-text class="text-base font-medium text-white">全网舆情监测</a-typography-text>
                                </div>
                                <div class="flex items-center mb-4">
                                    <a-badge color="white" />
                                    <a-typography-text class="text-base font-medium text-white">SEM竞价托管</a-typography-text>
                                </div>
                            </a-space>
                        </a-col>
                        <a-col :span="18">
                            <div class="relative">
                                <a-image src="https://picsum.photos/800/400" alt="品牌整合营销" class="w-full rounded" />
                                <div class="absolute bottom-0 left-0 p-4 bg-gradient-to-r from-blue-900/80 to-transparent w-full h-full flex flex-col justify-center">
                                    <a-typography-text class="text-xs text-white/70">BRAND MARKETING</a-typography-text>
                                    <a-typography-title :level="3" class="!text-white !font-bold !mt-2">品牌整合营销</a-typography-title>
                                    <a-typography-text class="absolute bottom-4 right-8 text-8xl font-bold text-white/30">01</a-typography-text>
                                </div>
                                <div class="absolute top-1/2 right-4 transform -translate-y-1/2">
                                    <a-button shape="circle" class="flex items-center justify-center bg-white/20 border-0">
                                        <template #icon><right-outlined class="text-white" /></template>
                                    </a-button>
                                </div>
                            </div>
                        </a-col>
                    </a-row>
                </a-col>
            </a-row>
        </a-layout-content>

        <!-- 行业价值 -->
        <a-layout-content class="bg-white py-12 pl-[10%]">
            <div class="container mx-auto">
                <a-typography-title class="text-center !mb-8">彼亿营销持续为各行业创造更大价值</a-typography-title>
                <a-row :gutter="24" class="mt-10">
                    <!-- 金融行业 -->
                    <a-col :span="4" class="mb-6">
                        <div class="relative p-4 rounded-md h-full bg-cover bg-center" :class="{'bg-[url(https://picsum.photos/400/800)]': true}">
                            <div class="text-white  mb-4">金融</div>
                            <!-- <a-image src="https://picsum.photos/100/150" class="w-full rounded-md" /> -->
                            <div class="mt-4">
                                <div class="text-white text-xs mb-2">专注于品牌线上推广的网络营销解决方案</div>
                            </div>
                        </div>
                    </a-col>

                    <!-- 教育行业 -->
                    <a-col :span="8" class="mb-6">
                        <div class="bg-gray-100 p-4 rounded-md h-full">
                            <div class="text-gray-700 mb-4">教育</div>
                            <!-- <div class="text-xs text-gray-600 mb-2">为各大教育机构、培训学校等提供全方位的网络营销推广服务，打造教育品牌影响力</div> -->
                            <div class="flex items-center mb-2">
                                <a-checkbox checked></a-checkbox>
                                <span class="text-xs ml-2">专注于品牌线上推广的网络宫销解决方案全网媒体平台传播品牌优质信息</span>
                            </div>
                            <div class="flex items-center mb-2">
                                <a-checkbox checked></a-checkbox>
                                <span class="text-xs ml-2">助力企业提升品牌美誉度资深网站seo优化师对接</span>
                            </div>
                            <div class="flex items-center mb-2">
                                <a-checkbox checked></a-checkbox>
                                <span class="text-xs ml-2">全面诊断网站问题，制定搜索马擎优化方案</span>
                            </div>
                            <div class="text-xs text-gray-600 mt-4">客户案例</div>
                            <div class="flex items-center mt-2 space-x-4">
                                <a-image src="https://picsum.photos/100/30?random=1" width="100" height="30" />
                                <a-image src="https://picsum.photos/100/30?random=2" width="100" height="30" />
                            </div>
                            <div class="mt-4">
                                <div class="text-xs text-gray-600">相关产品：</div>
                                <div class="flex flex-wrap mt-2">
                                    <a-tag class="mr-2 mb-2 !border-0 !bg-transparent">
                                        <LineChartOutlined class="mr-1 text-blue-500" />品牌整合营销
                                    </a-tag>
                                    <a-tag class="mr-2 mb-2 !border-0 !bg-transparent">
                                        <GlobalOutlined class="mr-1 text-blue-500" />微信seo优化
                                    </a-tag>
                                    <a-tag class="mr-2 mb-2 !border-0 !bg-transparent">
                                        <RiseOutlined class="mr-1 text-blue-500" />SEM竞价托管
                                    </a-tag>
                                </div>
                                <div class="flex mt-4 space-x-4">
                                    <a-button type="primary" class="!bg-blue-500 !rounded-md flex-1">立即咨询</a-button>
                                    <a-button class="!text-gray-600 !border-gray-300 !rounded-md flex-1">了解更多</a-button>
                                </div>
                            </div>
                        </div>
                    </a-col>
                    <a-col :span="4" class="mb-6">
                        <div class="relative p-4 rounded-md h-full bg-gray-800" :class="{'bg-[url(https://picsum.photos/400/800)]': true}">
                            <div class="text-white  mb-4">地产</div>
                            <!-- <a-image src="https://picsum.photos/100/150" class="w-full rounded-md" /> -->
                            <div class="mt-4">
                                <div class="text-white text-xs mb-2">专注于品牌线上推广的网络营销解决方案</div>
                            </div>
                        </div>
                    </a-col>
                    <a-col :span="4" class="mb-6">
                        <div class="relative p-4 rounded-md h-full bg-gray-800" :class="{'bg-[url(https://picsum.photos/400/800)]': true}">
                            <div class="text-white  mb-4">快销品</div>
                            <!-- <a-image src="https://picsum.photos/100/150" class="w-full rounded-md" /> -->
                            <div class="mt-4">
                                <div class="text-white text-xs mb-2">专注于品牌线上推广的网络营销解决方案</div>
                            </div>
                        </div>
                    </a-col>
                    <a-col :span="4" class="mb-6">
                        <div class="relative p-4 rounded-md h-full bg-gray-800" :class="{'bg-[url(https://picsum.photos/400/800)]': true}">
                            <div class="text-white  mb-4">制造行业</div>
                            <!-- <a-image src="https://picsum.photos/100/150" class="w-full rounded-md" /> -->
                            <div class="mt-4">
                                <div class="text-white text-xs mb-2">快速构建企业级数据架构</div>
                            </div>
                        </div>
                    </a-col>
                </a-row>
                <!-- 服务项目 -->
                <a-row class="container mx-auto ">
                    <a-col :span="24">
                        <a-row :gutter="[16, 16]" class="mb-4 flex flex-wrap justify-between gap-4">
                            <a-col v-for="(item, index) in industryNews" :key="index" :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                                <a-card hoverable class="h-full transition-all duration-300 transform hover:-translate-y-1 shadow-lg pl-4 py-4 bg-gray-100">
                                    <a-card-meta>
                                        <template #title>
                                            <a-space>{{ item.title }}</a-space>
                                        </template>
                                        <template #description>
                                            <a-typography-paragraph type="secondary" class="text-xs">
                                                {{ item.description }}
                                            </a-typography-paragraph>
                                        </template>
                                    </a-card-meta>
                                </a-card>
                            </a-col>
                            <a-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4">
                                <a-card hoverable class=" h-full transition-all duration-300 transform hover:-translate-y-1 shadow-lg  pl-4 py-4 bg-gray-100">
                                    <a-card-meta>
                                        <template #title>
                                            <a-space>全部案例</a-space>
                                        </template>
                                        <template #description>
                                            <a-typography-paragraph class="text-xs text-blue-500 hover:text-blue-700 cursor-pointer">
                                                查看更多>
                                            </a-typography-paragraph>
                                        </template>
                                    </a-card-meta>
                                </a-card>
                            </a-col>
                        </a-row>
                    </a-col>
                </a-row>
            </div>
        </a-layout-content>

        <!-- 行业资讯 -->
        <a-layout-content class="bg-gray-50">
            <a-row class="container mx-auto py-16 pl-[10%]">
                <a-col :span="24">
                    <div class="text-center mb-4">
                        <a-typography-title class="!mb-1">行业资讯</a-typography-title>
                        <a-typography-text class="text-gray-500 text-sm">了解行业动态和最新资讯，把握市场动向</a-typography-text>
                    </div>

                    <a-row :gutter="24" class="mt-8">
                        <a-col :span="16">
                            <a-card hoverable class="w-full">
                                <template #cover>
                                    <div class="relative">
                                        <a-image src="https://picsum.photos/1200/500" alt="新闻主图" class="w-full" />
                                        <!-- <div class="absolute bottom-0 left-0 w-full bg-gradient-to-t from-black/70 to-transparent p-4">
                                            <a-typography-text class="text-white text-xs block mb-1">互联网营销专栏</a-typography-text>
                                            <a-typography-title :level="4" class="text-white !mb-1">巨量云营销广告：精准与实效性的结合</a-typography-title>
                                            <a-typography-text class="text-white/80 text-xs">2023-01-16 14:30:56</a-typography-text>
                                        </div> -->
                                    </div>
                                </template>
                                <a-card-meta class="px-5 py-6">
                                    <template #title>
                                        <div class="flex items-center px-4 pb-4">
                                            <a-tag color="processing" class="mr-4">品牌整合营销</a-tag>
                                            <a-space class="text-3xl font-normal">百度运营推广：策略与实践指南</a-space>
                                        </div>
                                    </template>
                                    <template #description>
                                        <a-typography-paragraph class="text-gray-600 mt-2 line-clamp-2">
                                            在当今竞争激烈的数字营销领域，百度运营推广作为连接企业与目标受众的重要桥梁，凭借其强大的搜索引擎流量和精准的投放机制，成为众多企业提升品牌知名度、驱动业务增长的重要工具。
                                        </a-typography-paragraph>
                                        <div class="flex justify-between items-center mt-2">
                                            <a-typography-text class="text-gray-400 text-xs">2023-01-16 11:40:36</a-typography-text>
                                            <a-button type="link" class="!p-0 text-gray-500 hover:text-gray-700">
                                                <left-outlined />
                                                <right-outlined />
                                            </a-button>
                                        </div>
                                    </template>
                                </a-card-meta>
                            </a-card>
                        </a-col>

                        <a-col :span="8">
                            <a-card class="w-full mb-5">
                                <div class="flex justify-between items-center mb-3 px-5 pt-5">
                                    <a-typography-title :level="5" class="!mb-0">品牌声誉管理</a-typography-title>
                                    <a-button type="link" class="text-blue-500 text-xs p-0">了解更多 ></a-button>
                                </div>

                                <a-list item-layout="horizontal ">
                                    <a-list-item>
                                        <a-list-item-meta>
                                            <template #avatar>
                                                <a-image src="https://picsum.photos/100/70?random=1" class="w-16 h-16 rounded" />
                                            </template>
                                            <template #title>
                                                <div class="h-[70px] flex flex-col justify-between">
                                                    <a-space class="font-medium text-lg">全网舆情监控：实时把控舆论风向，助力企业决策</a-space>
                                                    <a-space class="text-gray-400 text-xs">2023-12-13 17:40:20</a-space>
                                                </div>
                                            </template>
                                        </a-list-item-meta>
                                    </a-list-item>

                                    <a-list-item>
                                        <a-list-item-meta>
                                            <template #avatar>
                                                <a-image src="https://picsum.photos/100/70?random=2" class="w-16 h-16 rounded" />
                                            </template>
                                            <template #title>
                                                <div class="h-[70px] flex flex-col justify-between">
                                                    <a-space class="font-medium text-lg">网络声誉平台：企业声誉管理的重要工具</a-space>
                                                    <a-space class="text-gray-400 text-xs">2023-11-18 10:18:03</a-space>
                                                </div>
                                            </template>
                                        </a-list-item-meta>
                                    </a-list-item>
                                </a-list>
                            </a-card>
                            <a-card class="w-full">
                                <div class="flex justify-between items-center mb-3 mt-4 px-5 ">
                                    <a-typography-title :level="5" class="!mb-0">网站SEO优化</a-typography-title>
                                    <a-button type="link" class="text-blue-500 text-xs p-0">了解更多 ></a-button>
                                </div>

                                <a-list item-layout="horizontal">
                                    <a-list-item>
                                        <a-list-item-meta>
                                            <template #avatar>
                                                <a-image src="https://picsum.photos/100/70?random=3" class="w-16 h-16 rounded" />
                                            </template>
                                            <template #title>
                                                <div class="h-[70px] flex flex-col justify-between">
                                                    <a-space class="font-medium text-base">小小网站优化：创造可观收益</a-space>
                                                    <a-space class="text-gray-400 text-xs">2023-01-14 15:52:28</a-space>
                                                </div>
                                            </template>
                                        </a-list-item-meta>
                                    </a-list-item>

                                    <a-list-item>
                                        <a-list-item-meta>
                                            <template #avatar>
                                                <a-image src="https://picsum.photos/100/70?random=4" class="w-16 h-16 rounded" />
                                            </template>
                                            <template #title>
                                                <div class="h-[70px] flex flex-col justify-between">
                                                    <a-space class="font-medium text-lg">百度算法更新解析：搜索排名影响，提升网站收录效率</a-space>
                                                    <a-space class="text-gray-400 text-xs">2023-01-02 15:07:41</a-space>
                                                </div>
                                            </template>
                                        </a-list-item-meta>
                                    </a-list-item>
                                </a-list>
                            </a-card>
                        </a-col>
                    </a-row>
                </a-col>
            </a-row>
        </a-layout-content>
    </div>
</template>
  
<script setup lang="jsx">

const industries = ref(['金融', '教育', '医疗', '房地产', '汽车']);

const news = ref([
    {
        title: '品牌营销资讯',
        date: '2024-01-14',
        image: 'https://picsum.photos/64/64?random=1',
    },
    {
        title: '品牌营销资讯',
        date: '2024-01-14',
        image: 'https://picsum.photos/64/64?random=2',
    },
    {
        title: '品牌营销资讯',
        date: '2024-01-14',
        image: 'https://picsum.photos/64/64?random=3',
    },
]);

// 服务项目数据
const services = ref([
    {
        title: '品牌整合营销',
        description: '提供全方位的品牌策划与推广服务，帮助企业建立强大的品牌形象',
        icon: 'BulbOutlined',
    },
    {
        title: '网站SEO优化',
        description: '专业的搜索引擎优化服务，提升网站排名与流量',
        icon: 'GlobalOutlined',
    },
    {
        title: 'SEM竞价托管',
        description: '精准的搜索引擎营销策略，最大化广告投入回报率',
        icon: 'RiseOutlined',
    },
    {
        title: '全网舆情监测',
        description: '实时监控品牌声誉，及时应对危机，保护企业形象',
        icon: 'RadarChartOutlined',
    },
]);

// 行业资讯数据
const industryNews = ref([
    {
        title: '旅游行业',
        description: '提升页面收录率及展示',
    },
    {
        title: '餐饮行业',
        description: '页面Meta信息的合理优化',
    },
    {
        title: '母婴行业',
        description: '梳理关键词优化网站Meta信息',
    },
    {
        title: '新零售',
        description: '快速构建企业级数据架构',
    },
    {
        title: '互联网行业',
        description: '快速构建企业级数据架构',
    },
    {
        title: '医疗健康',
        description: '提升页面收录率及展示',
    },
    {
        title: '建材行业',
        description: '梳理关键词优化网站Meta信息',
    },
    {
        title: '汽车',
        description: '专注于品牌线上推广的网络营销',
    },
]);

// 客户案例数据
const cases = ref([
    {
        title: '某金融科技公司品牌升级',
        description: '通过整合营销策略，帮助客户在6个月内提升品牌知名度35%',
        image: 'https://picsum.photos/300/200?random=10',
    },
    {
        title: '教育机构线上获客方案',
        description: '优化SEO与SEM策略，降低获客成本40%，转化率提升25%',
        image: 'https://picsum.photos/300/200?random=11',
    },
    {
        title: '医疗器械企业全网营销',
        description: '构建全渠道营销体系，年销售额增长50%以上',
        image: 'https://picsum.photos/300/200?random=12',
    },
]);

// 合作伙伴数据
const partners = ref([
    '阿里巴巴', '腾讯', '百度', '京东', '华为', '小米', 
    '网易', '字节跳动', '美团', '滴滴', '携程', '苏宁'
]);

// 数据统计
const statistics = ref({
    clients: '1000+',
    projects: '5000+',
    satisfaction: '98%',
    partners: '20+'
});
</script>
<style></style>